<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于事件回调函数中的this</title>
<!--    安装vue-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <h1>计数器:{{counter}}</h1>
    <button @click="counter++">点击我加1</button>
    <button @click="add">点击我加1</button>
    <button @click="add2">点击我加1(箭头函数)</button>

</div>

<!--vue代码-->
<script>
    const vm = new Vue({
        el : '#app',
        data : {
            msg : '关于事件中回调函数的this',
            counter : 0
        },
        methods : {
            add (){
                //错误的
                // counter++
                //这里需要操作counter变量?怎么办
                // console.log(vm === this)
                // console.log(this)
                // vm.counter++
                this.counter++
            },
            add2:()=>{
                // this.counter++
                // console.log(this === vm)
                // vm.counter++
                //箭头函数中没有this,箭头函数中的this是从父级作用域中继承过来的
                //对于当前程序来说,父级作用域就是全局作用域 : window
                console.log(this)
            },
            sayHi(){
                alert('hi...')
            }
        }
    })
</script>

</body>
</html>